<template xmlns:el-form="http://www.w3.org/1999/html">
    <div>
        <el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer">
            <h2 class="loginTitle">用户登录</h2>
            <el-form-item prop="username">
                <el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="用户名" id="loginUser"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="text" auto-complete="false" v-model="loginForm.password" placeholder="密码" id="loginPassword"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" style="width: 100%" class="loginButton">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                loginForm: {
                    username:'',
                    password:''
                },
                rules:{
                    username:[{required: true, message: '请输入用户名', trigger: 'blur'}],
                    password:[{required: true, message: '请输入密码', trigger: 'blur'}],
                }
            }
        },
        methods: {
            onSubmit () {
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        this.$axios.get("/login")
                            .then(resp=>{
                                console.log(resp.data)
                            })

                    } else {
                        this.$message.error('请输入用户名和密码');
                        return false;
                    }
                });
            },
            resetForm(loginForm) {
                this.$refs[loginForm].resetFields();}}}
        //     }
        // // }

</script>

<style>

    #app,
    html,
    body{
        background-color: #2D3A4B;
        height:100%;
    }

    .loginContainer {
        padding: 150px 350px 150px 500px;
        width: 450px;

    }

    .loginTitle{
        text-align:center;
        margin:8px auto 48px auto;
        color:white;
        height:1px;
    }


    #loginUser{

        margin:0px 0px 0px 0px;
    }

    #loginPassword{

        margin:0px 0px 0px 0px;
    }

    .loginButton{
        background-color:blueviolet;
        margin:0px 0px 0px 0px;
    }








</style>
